<template>
    <div class="projectEdit-container">
        <ivu-header :option="headerOption"></ivu-header>
        <BackTop></BackTop>

        <div class="projectEdit-filter">
            <fieldset>
                <legend>{{fieldsetTitle}}</legend>
                <Row>
                    <span class="form-label"><span class="red">*</span> 业务线：</span>
                    <Select v-model="queryData.bizId" filterable style="width: 260px">
                        <Option
                            v-for="item in bizSelectOptions"
                            :value="item.value"
                            :key="item.value">
                            {{ item.label }}
                        </Option>
                    </Select>
                </Row>
                <Row>
                    <span class="form-label"><span class="red">*</span> 项目名：</span>
                    <Input v-model="queryData.projName" style="width: 260px"></Input>
                </Row>
                <Row>
                    <span class="form-label"><span class="red">*</span> 前端项目code：</span>
                    <Input v-model="queryData.feCode" style="width: 260px"></Input>
                </Row>
                <Row>
                    <span class="form-label"><span class="red">*</span> 后端项目code：</span>
                    <Input v-model="queryData.beCode" style="width: 260px"></Input>
                </Row>
                <Row>
                    <span class="form-label">
                        <span class="red"></span>
                        <Tooltip placement="top">
                            <Icon type="ios-information-outline"></Icon>
                            <div slot="content">
                                模块是项目下聚合接口的维度，可以是页面 </br>
                                路由名称、服务模块名称，如：看门店，门 </br>
                                店画像，用户模块
                            </div>
                        </Tooltip> 模块：
                    </span>
                    <div class="module-blocks">
                        <Tag
                            type="border"
                            color="blue"
                            v-if="(projId !== undefined) && queryData.moduleList.length"
                            v-for="(item, index) in queryData.moduleList"
                            :value="item.moduleName"
                            :key="item.moduleName">
                            {{item.moduleName}}
                        </Tag>
                        <Button
                            class="btn-add-module"
                            type="dashed"
                            size="small"
                            color="blue"
                            long>
                            <Icon type="plus-round"></Icon> 添加模块
                        </Button>
                    </div>
                </Row>
                <Row class="btn-row">
                    <Button @click="submitEditProject(false)">取消</Button>
                    <Button
                        @click="submitEditProject(true)"
                        class="btn-add-project-submit"
                        :loading="submitLoading">
                        确认
                    </Button>
                </Row>
            </fieldset>
        </div>
    </div>
</template>

<script src="./projectEdit.js"></script>

<style lang="less">
    .projectEdit-container {
        .projectEdit-filter {
            width: 500px;
            margin: 84px auto 0;
            fieldset {
                border-color: #ddd;
                border-radius: 4px;
                padding: 18px 35px 20px 35px;
                .ivu-row {
                    width: 430px;
                    margin: 20px auto;
                    &.btn-row {
                        text-align: center;
                    }
                }
                .form-label {
                    width: 110px;
                    line-height: 32px;
                    display: inline-block;
                    text-align: right;
                    font-weight: 700;
                    vertical-align: top;
                    .red {
                        color: red;
                    }
                }
                .module-blocks {
                    display: inline-block;
                    width: 260px;
                    min-height: 32px;
                    .btn-add-module {
                        display: block;
                        margin-top: 4px;
                        text-align: center;
                    }
                }
            }
            .btn-add-project-submit {
                margin-left: 50px;
            }
        }
    }
</style>

